<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            /* 背景图片地址 */
            background-image: url('./static/2 (4).jpg');

            /* 背景图片覆盖整个元素 */
            background-size: cover;

            /* 背景图片位置 */
            background-position: center center;

            /* 背景图片固定，不会随着页面滚动而滚动 */
            background-attachment: fixed;

        }

        .a1 {
            position: absolute;
            top: 30%;
            left: 10%;
        }

        .a2 {
            position: absolute;
            top: 10%;
            /* left: 80%; */
            right: 10%;
        }

        .c {
            /* 设置背景颜色 */
            background-color: #4c95af;
            /* 例如，使用绿色 */
            /* 设置其他样式属性，如文字颜色、边框等 */
            color: white;
            /* 文字颜色为白色 */
            border: none;
            /* 去除边框 */
            padding: 10px 20px;
            /* 内边距 */
            cursor: pointer;
            /* 鼠标悬停时显示小手图标 */
        }

        /* :hover 是一个伪类选择器，它用于选择用户鼠标悬停（hover）在其上的元素。 */

        .c:hover {
            background-color: #5f45a082;
            /* 悬停时背景颜色稍微变暗 */
        }
    </style>
</head>

<body>
<form action="/login" method="post">

    <div class="a1" style="display:inline-block; width: 450px;height: 300px;border: rgba(229, 230, 230)solid 2px;">
        <div style="width: 70px;height: 70px;border-radius: 50%;overflow: hidden;margin: 50px auto 20px;"><img
                style="width: 100%; height: auto;" src="./static/头像.png" alt=""></div>

        <div style="text-align: center;line-height: 40px;">


            <div>🐧 <input type="text" name="username" placeholder="QQ号码/手机/邮箱" required></div>
            <div>🔒 <input type="password" name="password" placeholder="密码" required></div>

            <div>
                <button type="submit" class="c">登录</button>
                <button type="button" class="c" onclick="window.location.href='./regist.jsp'">注册</button>
<%--                是个重定向--%>
            </div>


        </div>
    </div>

    <div class="a2" style="width: 800px;height: 600px;border: rgba(229, 230, 230)solid 2px;word-wrap: break-word; ">
        <div style=" font-size: 50px; text-align: center;">QQ9</div>
        <div style="text-align: center;">
            <span style=" font-size: 70px;">界面</span>
            <span style=" font-size: 70px;color: rgb(76,149,175);">轻盈焕新</span>
        </div>
        <div style=" font-size: 70px; text-align: center;">简洁纯碎&nbsp;氛围轻松</div>
        <div style=" font-size: 20px; text-align: center;color: rgba(166, 166, 166);">操作灵动舒适，视觉简单纯粹</div>
    </div>
</form>


<script src="./static/jquery-2.1.0.js"></script>

<script>


</script>

</body>

</html>